<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>教师信息</span>
        <el-button @click="startEdit" style="float: right; padding: 3px 0" type="text">编辑</el-button>
      </div>
      <div>
        <div class="info-item">
          <p class="info-colum">
            <label>教师编号:</label>
            <span v-text="showTeacherInfo.nid"></span>
          </p>
          <p class="info-colum">
            <label>姓名:</label>
            <span v-text="showTeacherInfo.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>身份证号码:</label>
            <span v-text="showTeacherInfo.identity"></span>
          </p>
          <p class="info-colum">
            <label>性别:</label>
            <span v-text="showTeacherInfo.sex"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>手机号码:</label>
            <span v-text="showTeacherInfo.phone"></span>
          </p>
          <p class="info-colum">
            <label>家庭地址:</label>
            <span v-text="showTeacherInfo.address"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>所属系别编号:</label>
            <span v-text="Xi.nid"></span>
          </p>
          <p class="info-colum">
            <label>所属系别名称:</label>
            <span v-text="Xi.name"></span>
          </p>
        </div>
        <div class="info-item">
          <p class="info-colum">
            <label>所属分院编号:</label>
            <span v-text="Yuan.nid"></span>
          </p>
          <p class="info-colum">
            <label>所属分院名称:</label>
            <span v-text="Yuan.name"></span>
          </p>
        </div>
      </div>
    </el-card>
    <div :class="['alertBg',isEdit?'show':'']">
      <div class="alertForm">
        <el-form label-width="80px">
          <div style="display:flex">
            <el-form-item label="姓名">
              <el-input v-model="editSubmitForm.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="editSubmitForm.sex"></el-input>
            </el-form-item>
          </div>
          <div style="display:flex">
            <el-form-item label="手机号码">
              <el-input v-model="editSubmitForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="editSubmitForm.position"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="身份证号">
            <el-input v-model="editSubmitForm.identity"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="editSubmitForm.address"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="endEdit" type="primary">确定</el-button>
            <el-button @click="close" style="margin-left:200px">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { handleMessage } from "../../plugins";
export default {
  data() {
    return {
      showTeacherInfo: {},
      Yuan: {},
      Xi: {},
      isEdit: false,
      editSubmitForm: {}
    };
  },
  methods: {
    async endEdit() {
      let res =await this.$http.put(
        `rest/Teacher/${this.showTeacherInfo._id}`,
        this.editSubmitForm
      );
      handleMessage(this, res.data);
      this.getTeacherInfo()
      this.isEdit = false;
    },
    startEdit() {
      this.editSubmitForm = {
        nid: this.showTeacherInfo.nid,
        identity: this.showTeacherInfo.identity,
        name: this.showTeacherInfo.name,
        sex: this.showTeacherInfo.sex,
        position: this.showTeacherInfo.position,
        phone: this.showTeacherInfo.phone,
        address: this.showTeacherInfo.address,
        department: this.showTeacherInfo.department._id
      };
      this.isEdit = true;
    },
    close() {
      this.editSubmitForm = {};
      this.isEdit = false;
    },
    async getTeacherInfo() {
      let res = await this.$http.get("rest/Teacher/" + this.$route.params.id);
      this.showTeacherInfo = res.data;
      this.Yuan = this.showTeacherInfo.department.superior;
      this.Xi = this.showTeacherInfo.department;
    }
  },
  created() {
    this.getTeacherInfo();
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 800px;
}
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-colum {
  width: 50%;
  padding: 10px 0;
}
.alertBg {
  display: none;
}
.show {
  display: flex;
}
</style>